<template>
  <div class="create">
    <div class="cate-list" v-if="cateList.length > 0">
      <a-badge
        v-for="(item, index) of cateList"
        :key="index"
        :count="item.application_total"
        :number-style="{
          backgroundColor: currentCateId == item.id ? 'rgb(255, 101, 98)' : '#FFF',
          color: currentCateId == item.id ? '#fff' : 'rgb(255, 101, 98)',
          boxShadow: 'none',
        }"
      >
        <div
          class="cate-item"
          :class="currentCateId == item.id ? 'cate-item-current' : ''"
          @click="onCateClick(item)"
        >
          <img
            :src="item.cat_icon"
            alt=""
            class="cate-item-icon"
            v-if="item.cat_icon"
          />
          <cu-icon
            v-else-if="item.cat_name == '全部'"
            type="icon-yingyong"
            style="font-size: 30px"
          ></cu-icon>
          <div class="cate-item-name">{{ item.cat_name }}</div>
        </div>
      </a-badge>
    </div>

    <div class="app-list hide-scroller-bar" v-if="appList.length > 0">
      <div class="app-item-wrap" v-for="(item, index) of appList" :key="index">
        <div class="app-item" @click="onAppClick(item)">
          <div class="app-item-top">
            <img
              :src="item.icon"
              alt=""
              class="app-item-icon"
              v-if="item.icon"
            />
            <div class="app-item-name">
              {{ item.name }}
            </div>
          </div>
          <div class="app-item-desc">{{ item.info }}</div>
          <ArrowRightOutlined class="app-item-arrow" />
        </div>
      </div>
    </div>

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { ArrowRightOutlined, AppstoreOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "Create",
  components: { ArrowRightOutlined },

  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      loginVisible: false,
      cateList: [],
      currentCateId: 0,
      appList: [],
      totalList: [],
    });

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const getCategoryList = () => {
      return new Promise((resolve) => {
        state.cateList = [];
        request
          .get("/work_ai", "/application/industryCategory/list", {})
          .then((res) => {
            state.cateList = res.industryList;
            state.cateList.unshift({
              cat_name: "全部",
              id: 0,
            });
            resolve();
          });
      });
    };

    const getAllApplications = async (replaceList = true) => {
      const res = await request.get("/work_ai", "/pc/application/list", { is_industry: 1 })

      state.cateList[0].application_total = res.list.length;

      if (replaceList) {
        state.appList = res.list;
      }
    };

    const getAppList = async (cateId) => {
      const res = await request.get("/work_ai", "/application/category/app_list", { cat_id: cateId });
      state.appList = res.app_list
    };

    const onCateClick = (cate) => {
      let query = {};
      if (cate.id) {
        query = { cateId: cate.id };
      }
      router.push({
        name: "IndustryHome",
        query: query,
      });
    };

    const onAppClick = (app) => {
      let params = {};
      if (state.currentCateId) {
        params = { cateId: state.currentCateId };
      } else if (app.top_cat_id) {
        params = { cateId: app.top_cat_id };
      }
      router.push({
        name: "Industry",
        params: params,
        query: {
          appId: app.id,
        },
      });
    };

    const init = async () => {
      await getCategoryList()
      if (route.query.cateId) {
        state.currentCateId = route.query.cateId
        await getAppList(route.query.cateId)
        await getAllApplications(false)
      } else {
        await getAllApplications()
      }
      
      if (route.query.appId) {
        onAppClick({id: route.query.appId, top_cat_id: route.query.cateId})
      }
    };

    init();

    watch(
      () => route.query.cateId,
      (val) => {
        if (val) {
          state.currentCateId = route.query.cateId;
          getAppList(route.query.cateId);
        } else {
          state.currentCateId = 0;
          getAllApplications();
        }
      }
    );

    watch(
      () => route.query.appId,
      (val) => {
        if (val) {
          onAppClick({id: val, top_cat_id: route.query.cateId})
        }
      }
    );

    return {
      ...toRefs(state),
      loginCallback,
      onCateClick,
      onAppClick,
    };
  },
});
</script>

<style lang="less" scoped>
.create {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-image: url(../home/home_bg.png);
  // background-size: cover;
  // background-position: center;
  // background-repeat: no-repeat;

  .cate-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px 0;

    .ant-badge {
      margin: 0 10px;
    }

    .cate-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      cursor: pointer;

      .cate-item-icon {
        width: 30px;
        height: 30px;
        object-fit: cover;
      }

      .cate-item-name {
        margin-top: 10px;
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: @primary-color;
        border-radius: 6px;
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px);
        transition: all 0.3s linear;
      }
    }

    .cate-item-current {
      background-color: rgba(0, 0, 0, 0.05);
      color: @primary-color;
      border-radius: 6px;
    }
  }

  .app-list {
    display: flex;
    flex-wrap: wrap;
    max-height: calc(100% - 140px);
    overflow: hidden auto;
    padding-bottom: 10px;

    .app-item-wrap {
      width: 20%;
      padding: 0 10px;
      box-sizing: border-box;

      .app-item {
        width: 100%;
        height: 164px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #e9e9e9;
        margin: 10px auto;
        padding: 20px 16px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.3s linear;
        position: relative;

        &:hover {
          -webkit-transform: translateY(-3px);
          -ms-transform: translateY(-3px);
          transform: translateY(-3px);
          border: 1px solid @primary-color;

          .app-item-arrow {
            visibility: visible;
          }
        }

        .app-item-top {
          display: flex;
          align-items: center;

          .app-item-icon {
            width: 46px;
            height: 46px;
            object-fit: cover;
          }

          .app-item-name {
            padding-left: 10px;
            font-size: 16px;
            font-weight: 600;
          }
        }

        .app-item-desc {
          margin-top: 20px;
          color: #767676;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .app-item-arrow {
          color: @primary-color;
          position: absolute;
          right: 20px;
          bottom: 10px;
          font-size: 16px;
          visibility: hidden;
        }
      }
    }
  }
}
</style>
